<template>

    <div>

        <h2>渠道管理</h2>

        <div class="container">

            <div>
                <el-button @click="add">添加</el-button>
            </div>

            <el-table
                    :data="items"
                    style="width: 100%"
                    v-loading="loading">
                <el-table-column
                        prop="nickname"
                        label="渠道名称"
                        width="180"
                >
                </el-table-column>
                <el-table-column
                        prop="open_code"
                        label="邀请码"
                        width="120"
                >
                </el-table-column>
                <el-table-column
                        prop="invite_url"
                        label="推广链接"
                >
                </el-table-column>
                <el-table-column
                        prop="member_total"
                        label="注册用户量"
                >
                </el-table-column>
                <el-table-column
                        prop="recharge_amount_total"
                        label="充值总金额"
                >
                </el-table-column>
            </el-table>

            <el-pagination
                    ref="mainPage"
                    background
                    class="pagination"
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="params.limit"
                    @current-change="setPage"
                    @prev-click="setPage"
                    @next-click="setPage"
            >
            </el-pagination>

        </div>

        <el-dialog
                title="充值详情"
                :visible.sync="dialogVisible"
                width="80%"
                :close-on-click-modal="false"
        >
            <div class="container">

                <el-form>
                    <el-form-item label="名称">
                        <el-input v-model="form.nickname"></el-input>
                    </el-form-item>

                </el-form>

            </div>

            <div style="text-align: center">
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>

    </div>

</template>
<script>
    export default {
      data() {
        return {
          dialogVisible: false,
          items: [],
          loading: true,
          amount_total: 0,
          params: {
            limit: 10,
            offset: 0,
            is_channel: 1,
            type: 'parent_id',
            keyword: '',
            datetime: []
          },
          currentPage: 1,
          total: 0,
          form: {
            nickname: ''
          }
        }
      },
      created() {
        this.fetch();
      },
      methods: {
        fetch() {
          axios.get('/admin/api/member', {params: this.params}).then((res) => {
            if (res.data.code === 0) {
              this.items = res.data.data.items;
              this.total = res.data.data.total;
              this.amount_total = res.data.data.amount_total;
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch(function() {
            this.$message('系统错误');
            this.loading = false;
          })
        },

        disable() {

        },

        enable() {

        },

        // 切换分页
        setPage: function(page) {
          this.currentPage = page;
          this.params.offset = (page - 1) * this.params.limit;
          this.fetch()
        },
        // 重新请求接口获取数据，参数发生了变化，页码重置为1
        reload: function() {
          if (this.currentPage === 1) {
            this.fetch();
          } else {
            this.setPage(1);
          }
        },

        add() {
          this.dialogVisible = true;
          this.form = {
            nickname: ''
          }
        },
        save() {
          if (this.form.nickname === '') {
            this.$message.error('渠道名称必须填写');
            return;
          }
          axios.post('/admin/api/member', this.form).then((res) => {
            if (res.data.code === 0) {
              this.fetch();
              this.dialogVisible = false;
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch(function() {
            this.dialogVisible = false;
            this.$message('系统错误');
            this.loading = false;
          })
        }
      }
    }
</script>